<%--
  Created by IntelliJ IDEA.
  User: Aqqqwer
  Date: 2021/7/8
  Time: 14:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>生活</title>
</head>
<style type="text/css">
    @import "/css/daohang.css";
    @import "/css/header.css";
</style>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>


    $(function () {

        $.ajax({
            url: '/sort/all_sort',
            type: 'get',
            dataType: 'json',
            success: function (jsonData) {
                console.info(jsonData);
                if (0 != jsonData.status) {
                    alert(jsonData.message);
                    return;
                }
                //一级分类
                var supSortList = jsonData.data;
                var len = supSortList.length;
                for (var index = 0; index < len; index++) {
                    var navHTML = ' <button style="" class="links_button button dropdown"><a href="/videos/find_type?sup_type={0}" style="text-decoration: none">{1}</a><span class="dropdown-content">';
                    //一级分类
                    var supSort = supSortList[index];
                    var supType = supSort.type;
                    var supId = supSort.id;
                    navHTML = navHTML.replace('{1}', supType);
                    navHTML = navHTML.replace('{0}', supId);
                    var subSortList = supSort.subSortList;
                    var l = subSortList.length;
                    for (var j = 0; j < l; j++) {
                        //二级分类
                        var subSort = subSortList[j];
                        navHTML += '<a href="/videos/find_type?sup_type=' + supId + '&sub_type=' + subSort.id + '">' + subSort.type + '</a>';
                    }
                    navHTML += '</span></button>';
                    $('#topNav').append(navHTML);
                }

            },
            error: function () {
                alert('加载视频分类数据异常');
            }

        });
    });
</script>
<body>
<div class="header_bd">
    <!-- 头部 -->
    <div class="header">
        <h1><img style="height: 50px;width: 180px"
                 src="">
        </h1>
        <form action="/videos/query_video" method="post">
            <input type="text" name="kd" placeholder="Search.." class="search">
            <button class="searchButton searchButton2">立即搜索</button>
        </form>

        <div class="login">
            <!-- 登录 -->
            <!-- 注册 -->
            <span><a href="login_user.jsp"><input type="button" class="dlspan" value="登 录"/></a></span>&nbsp;&nbsp;
            <span><a href="register_user.jsp"><input type="button" class="zcspan" value="注 册"/></a></span>
        </div>
    </div>


    <div class="topNav" id="topNav">
        <!-- 导航栏 -->
    </div>
</div>
</div>
<!-- </div> -->
<div id="content">
    <!-- 内容 -->
    <!--播放分类视频-->
    <c:choose>
        <c:when test="${ empty requestScope.videosList}">
            <span style="color: red;font-size: 22px">未查询到该分类视频</span>
        </c:when>
        <c:otherwise>
            <ul style="list-style: none;">
                <c:forEach items="${requestScope.videosList}" var="video">
                    <li class="ul_li"><a href="/videos/${video.id}.html" target="_blank"><img class="img"
                                                                                              src="${video.logo}"
                                                                                              alt="${video.title}<"></a>
                        <p><a title="${video.title}<">${video.title}</a></p>
                    </li>
                </c:forEach>
            </ul>
        </c:otherwise>
    </c:choose>


</div>

</body>
</html>
